<template>
  <van-nav-bar class="nav-bar" fixed placeholder>
    <template #left>
      <div class="nav-left">
        <span class="nav-title" @click="goToHomeRecommend">推荐</span>
        <span class="nav-divider">|</span>
        <span class="nav-subtitle" @click="goToHomeSquare">广场</span>
      </div>
    </template>
    <template #right>
      <div class="nav-icons">
        <van-icon name="search" size="20" color="#333" class="nav-icon" />
        <van-icon
          name="plus"
          size="20"
          color="#333"
          class="nav-icon nav-icon-plus" />
      </div>
    </template>
  </van-nav-bar>
</template>

<script setup>
import { useRouter } from "vue-router"

const router = useRouter()

const goToHomeRecommend = () => {
  router.push("/home/recommend")
}

const goToHomeSquare = () => {
  router.push("/home/square")
}
</script>

<style scoped>
.nav-bar {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 18px;

  color: #333;
  cursor: pointer;
}

.nav-title:hover {
  color: #ff9500;
  transition: color 0.3s;
}

.nav-divider {
  margin: 0 10px;
  color: #ccc;
}

.nav-subtitle {
  font-size: 18px;
  color: #999;
  cursor: pointer;
}

.nav-subtitle:hover {
  color: #ff9500;
  transition: color 0.3s;
}

.nav-icons {
  display: flex;
  align-items: center;
}

.nav-icon {
  margin-left: 15px;
}

.nav-icon-plus {
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 2px;
}
</style>
